<template>
    <div>
        <div class="flex flex_b">
           <div>
                <el-button type="primary" @click="addBtn" size="mini">添加商品</el-button>
				<el-button type="warning" @click="copyBtn" size="mini">复制商品</el-button>
				<el-button  @click="saveGoods" :loading="loading_btn" size="mini">保存商品</el-button>
            </div>
			<div>
				<el-button size="mini" type="primary" @click="isShow=true">导入</el-button>
				<el-button size="mini" type="primary" @click="downlodeTemp">下载模板</el-button>
				<el-button size="mini" type="primary" @click="downLode">导出</el-button>
			</div>
        </div>
        <br>
        <div class="searchForm">
            <div>
                商品名称： <el-input size="small" v-model="search_form.goods_name" 
				placeholder="请输入商品名称"  style="width:300px;"></el-input>
            </div>
            <div>
                商品分类： 
				<el-input size="small" v-model="search_form.cate" placeholder="请输入商品分类"  
				style="width:150px;"></el-input>
            </div>
            <div>
                商品品牌： <el-input size="small" v-model="search_form.brand" placeholder="请输入商品品牌"  
				style="width:150px;"></el-input>
            </div>
			<div>
			    编码/助记码： <el-input size="small" v-model="search_form.code" 
				placeholder="请输入编码/助记码"  
				style="width:150px;"></el-input>
			</div>
            <div>
                <el-button type="primary" size="mini" @click="search">检索</el-button>
                <el-button size="mini" @click="clearSearch">重置/检索</el-button>
            </div>
        </div>
		<br>
        <el-table stripe :data="list"  
		     ref="multipleTable"
			 border  
			 style="width: 100%"
			 @selection-change="handleSelectionChange"
			 @cell-click="cellClick"
			>
			<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
			<el-table-column  label="上传图片" width="130"   align="center">
			     <template slot-scope="scope">
					 <div class="flex flex_c">
						 <div class="button_text" @click="upImgBtn(scope)">
						 	  上传图片
						 </div>
						 <div style="margin-left: 10px;"
							v-if="scope.row.goods_img"
							class="button_text" @click="delImgBtn(scope)">
						 	  删除图片
						 </div>
					 </div>
					 <el-image 
						v-if="scope.row.goods_img"
						style="width: 100px; height: 50px"
						 :preview-src-list="[scope.row.goods_img]"
						 :src="scope.row.goods_img"></el-image>
			         
			     </template>
			 </el-table-column>
            <el-table-column   align="center"  width="200px"   
				label="编码/助记码">
				<template slot-scope="scope">
				   <div>
						<el-input @blur="pushList(scope)"  size="mini" v-model="scope.row.code"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column  align="center" width="130px"  label="商品品牌">
				<template slot-scope="scope">
				   <div>
						<el-input @blur="setGoodsName(scope)"  size="mini" v-model="scope.row.brand"></el-input>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"   width="130px"   label="商品分类">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.cate"></el-input>
				   </div>
				</template>
			</el-table-column>
             <el-table-column   align="center"  width="260px"   
				label="商品型号">
				<template slot-scope="scope">
				   <div>
						<el-input @blur="setGoodsName(scope)"  size="mini" v-model="scope.row.goods_type"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"  width="130px"   label="商品规格">
				<template slot-scope="scope">
				   <div>
						<el-input @blur="setGoodsName(scope)"  size="mini" v-model="scope.row.goods_weight"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"  width="130px"  label="商品颜色">
				<template slot-scope="scope">
				   <div>
						<el-input @blur="setGoodsName(scope)"  size="mini" v-model="scope.row.goods_color"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"  width="350px"  label="商品名称">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.goods_name"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"  width="350px"  label="商品别名">
            	<template slot-scope="scope">
            	   <div>
            			<el-input  size="mini" v-model="scope.row.goods_outher_name"></el-input>
            	   </div>
            	</template>
            </el-table-column>
            <el-table-column   align="center"   label="有无串号" width="130px">
				<template slot-scope="scope">
				   <div>
						<el-switch
						  v-model="scope.row.is_number"
						 :inactive-value="'0'"
						 :active-value="'1'"
						 >
						</el-switch>
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"    width="130px"  label="串号长度">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.number_length"></el-input>
				   </div>
				</template>
			</el-table-column>
            <el-table-column   align="center"  width="130px" label="是否报价">
            	<template slot-scope="scope">
            	   <el-switch
            	     v-model="scope.row.is_price"
            	    :inactive-value="'0'"
            	    :active-value="'1'"
            	    >
            	   </el-switch>
            	</template>
            </el-table-column>
			<el-table-column   align="center"    prop="remark"    label="备注"></el-table-column>
			
			<el-table-column   align="center"   label="状态">
				<template slot-scope="scope">
				   <div>
						<el-switch
						  v-model="scope.row.status"
						 :inactive-value="'0'"
						 :active-value="'1'"
						 >
						</el-switch>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center" width="150px"  label="b2b商品上架">
				<template slot-scope="scope">
				   <div>
						<el-switch
						  v-model="scope.row.b2b_up"
						 :inactive-value="'0'"
						 :active-value="'1'"
						 >
						</el-switch>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center" label="b2b商品上架"  prop="entry_company" width="130px" >
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.entry_company"></el-input>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  prop="add_time"   width="180px" label="添加时间"></el-table-column>
			<el-table-column   align="center"  prop="update_time" width="180px" label="修改时间"></el-table-column>
			<el-table-column   align="center"  prop="update_person"  label="修改人"></el-table-column>
           <el-table-column  label="操作"  fixed="left"  align="center">
                <template slot-scope="scope">
                    <i v-if="!scope.row.goods_id"  class="el-icon-delete" style="cursor: pointer;" 
					@click.stop="delRow(scope)"></i>
					<span v-else>--</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                    background
                    @size-change="pageChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totle">
            </el-pagination>
        </div>
        <el-dialog
                title="导入"
        		:close-on-click-modal="false"
                :visible.sync="isShow"
                width="450px"
        >
          <div style="text-align: center;">
        	  <el-upload
        	    v-if="isShow"
				:headers="headers"
        	    class="upload-demo"
        	    drag
        		:on-success="successFile"
        		:on-progress="progressFile"
        	    :action="action"
        		:data="params"
        	    >
        	    <i class="el-icon-upload"></i>
        	    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        	    <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
        	  </el-upload>
        	  <br>
        	  <el-progress :percentage="percent"></el-progress>
          </div>
        </el-dialog>
		<el-dialog title="选择图片"
				:close-on-click-modal="false"
				:modal-append-to-body="false"
				:append-to-body="true"
		        :visible.sync="isShowImg"
		        width="1050px">
			 <div style="padding-bottom: 30px;">
				 <imgSys @getImgData="getImgData" />
			 </div>
		     
		</el-dialog>
		
    </div>
</template>
<script>
	import imgSys from '@/components/imgSys'
    export default {
        components:{
            imgSys
        },

        data(){
            return {
                search_form:{
                    goods_name:"",
					cate:"",
					brand:"",
					code:"",
                },
                pageSize:20,
				page:1,
				page_totle:0,
				isShow:false,
				action:'',
				percent:0,
				params:{
					cid:"",
					update_person:""
				},
				headers:{
					Authorization:""
				},
				index:0,
				isShowImg:false
            }
        },
        mounted(){
            document.title = '商品管理'
			this.lodeList()
			this.action = this.$domain + '/excel/importGoods'
			let cid = sessionStorage.getItem('cid')
			let update_person = sessionStorage.getItem('user_name')
			this.params.cid = cid
			this.params.update_person = update_person
			this.headers.Authorization = sessionStorage.getItem('token')+'_'+sessionStorage.getItem('cid')
        },
        methods:{
			delImgBtn(scope){
				let index = scope.$index
				this.list[index].goods_img = ''
			},
			getImgData(val){
				this.list[this.index].goods_img = val
				this.isShowImg = false
			},
			upImgBtn(scope){
				this.index = scope.$index
				this.isShowImg = true
			},
			downLode(){
				let cid = sessionStorage.getItem('cid')
				
				 var goods_name
				 if(this.search_form.goods_name){
					goods_name = '&goods_name=' + this.search_form.goods_name
				 }else{
					goods_name = '&goods_name='
				 }
				 
				 var cate
				 if(this.search_form.cate){
				 	 cate = '&cate=' + this.search_form.cate
				 }else{
				 	 cate = '&cate='
				 }
				 
				 var brand
				 if(this.search_form.status){
				 	 brand = '&brand=' + this.search_form.brand
				 }else{
				 	 brand = '&brand='
				 }
				 
				 var code
				 if(this.search_form.status){
				 	 code = '&code=' + this.search_form.code
				 }else{
				 	 code = '&code='
				 }
				
				let url = `${this.$domain}/excel/exportGoods?cid=${cid}${goods_name}${cate}${brand}${code}`
				location.href = url
			},
			downlodeTemp(){
				let baseUrl = this.$baseUrl
				location.href = baseUrl + '/static/excelTemp/temp2.xls'
			},
			successFile(response, file, fileList){
				if(response.code==200){
					this.isShow = false
					 this.lodeList()
					 setTimeout(()=>{
					 	this.$post('/goods/syncGoodsData',{},res=>{
					 							 
					 	})
					 },1000)
				}else{
					this.$message.error(response.msg)
				}
				this.percent = 0
			},
			progressFile(event, file, fileList){
				let percent = event.percent
				this.percent = percent
			},
			setGoodsName(scope){
				return
				let index = scope.$index
				let row = scope.row
				this.list[index].goods_name = `${row.brand} ${row.goods_type} ${row.goods_weight} ${row.goods_color}`
			},
			copyBtn(){
				if(this.selectGoods.length == 0) return this.$message.error('请选择要复制的商品')
				for(let item of this.selectGoods){
					let obj = {
					    goods_id:undefined,
					    code:item.code,
					    brand:item.brand,
					    goods_type:item.goods_type,
					    goods_weight:item.goods_weight,
					    goods_color:item.goods_color,
					    goods_name:'',
						goods_outher_name:'',
					    cate:item.cate,
					    is_number:'1',
					    number_length:item.number_length,
					    is_price:0,
						remark:'',
						status:'1',
						b2b_up:0,
						entry_company:'',
						update_person:'',
					}
					this.list.push(obj)
				}
				
			},
            delRow(scope){
				let index = scope.$index
				if(scope.row.goods_id){
					this.$message.error('已保存的数据不能删除')
					// this.$confirm('确定删除该商品', '提示', {
					//   confirmButtonText: '确定',
					//   cancelButtonText: '取消',
					//   type: 'warning'
					// }).then(() => {
					// 	this.$post('/goods/delGoods',{goods_id:scope.row.goods_id},res=>{
					// 		this.list.splice(index,1)
					// 		this.$message.success('删除成功')
					// 	})
					// })
				}else{
					this.list.splice(index,1)
				}
            },
            saveGoods(){
				if(this.selectGoods.length==0) return this.$message.error('请选择商品')
				let cid = sessionStorage.getItem('cid')
				let update_person = sessionStorage.getItem('user_name')
				for(let item of this.selectGoods){
					item.cid = cid
					item.update_person = update_person
					if(!item.goods_name) return this.$message.error('商品名称不能为空')
				}
				this.loading_btn = true
				this.$post('/goods/addEditGoods',this.selectGoods,res=>{
					this.$message.success('操作成功')
					this.loading_btn = false
					this.lodeList()
					setTimeout(()=>{
						this.$post('/goods/syncGoodsData',{},res=>{
												 
						})
					},1000)
					
				})
			},
            
			lodeList(){
				let params = {
					search_form:this.search_form,
					page:this.page,
					pageSize:this.pageSize
				}
				this.$post('/goods/getGoodsList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
				})
			},
            clearSearch(){
                    this.search_form  = {
                            goods_name:"",
                            cate:"",
                            brand:"",
							code:""
                    }
                    this.page=1
                    this.lodeList()
            },
            
            addBtn(){
                let obj = {
                    goods_id:undefined,
                    code:'',
                    brand:'',
                    goods_type:'',
                    goods_weight:'',
                    goods_color:'',
                    goods_name:'',
					goods_outher_name:"",
                    cate:'',
                    is_number:'1',
                    number_length:18,
                    is_price:0,
					remark:'',
					status:'1',
					b2b_up:0,
					entry_company:'',
					update_person:'',
                }
                this.list.push(obj)
            },
        }
    }
</script>
